import React, { useState } from 'react';
import styles from './index.less';
import logo from '../../assets/logo.png';
import { DownOutlined } from '@ant-design/icons';

export default () => {
  const [show, setShow] = useState(false);
  return (
    <div className={styles.container}>
      <aside className={styles.left}>
        <div className={styles.menuLogo}>
          <img src={logo} alt=""/>
          <b>MADAO</b>
        </div>
        <ul className={styles.menus}>
          <li onClick={() => {
            setShow(!show);
          }}>
            <div className={styles.menuItem}>
              <span className={styles.menuTitle}>表单页</span>
              <DownOutlined className={styles.downIcon}/>
            </div>
            {show && <ul className={styles.subMenus}>
              <li>表格</li>
              <li>列表</li>
            </ul>}
          </li>
          <li>
            <div className={styles.menuItem}>
              <span className={styles.menuTitle}>列表页</span>
              <DownOutlined className={styles.downIcon}/>
            </div>
            {/*<ul className={styles.subMenus}>*/}
            {/*  <li>*/}
            {/*    表单页*/}
            {/*  </li>*/}
            {/*</ul>*/}
          </li>
        </ul>
      </aside>
      <section className={styles.right}>
        <header>

        </header>
        <footer>

        </footer>
      </section>
    </div>
  );
}
